<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 mb12 bdradius4" style="position: relative;">
      <div style="position: absolute;right: 20px;top: -36px;">
        <span class="curPointer line20" style="color: #1577FE;" @click="goRouter">退款订单</span>
      </div>
      <div style="position: relative">
        <div class="color000">
          <Card dis-hover class="criteria">
            <div ref="cardSearchBox" class="example-code ivu-col">
              <Form
                :model="pageData"
                :label-width="66"
                label-position="left"
                inline
              >
                <Row class="search-input">
                  <Col span="4">
                    <FormItem label="订单编号">
                      <Input
                        type="text"
                        v-model="pageData.orderNo"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入订单编号"
                      />
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="居民姓名">
                      <Input
                        type="text"
                        v-model="pageData.payName"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入居民姓名"
                      />
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="联系电话">
                      <Input
                        type="text"
                        v-model="pageData.phone"
                        clearable
                        @on-clear="onSearch"
                        placeholder="请输入联系电话"
                      />
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="缴费时间">
                      <DatePicker
                        v-model="pickDate"
                        type="daterange"
                        clearable
                        split-panels
                        placeholder="请选择缴费时间"
                        format="yyyy-MM-dd"
                        @on-change="handleDaterangeInput"
                        :transfer="true"
                        :editable="false"
                        :style="styles"
                      ></DatePicker>
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="缴费年份">
                      <DatePicker
                        ref="datePicker"
                        v-model="pickDate1"
                        type="year"
                        clearable
                        placeholder="请选择缴费年份"
                        format="yyyy"
                        @on-change="handleDaterangeInput1"
                        :transfer="true"
                        :editable="false"
                        :style="styles"
                      ></DatePicker>
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <Button
                      class="mr20"
                      icon="ios-search"
                      type="primary"
                      @click="onSearch()"
                    >搜索
                    </Button>
                    <Button @click="onReset()">重置</Button>
                  </Col>
                </Row>
              </Form>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    TabsName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tabsName: this.TabsName,
      pickDate: [],
      pickDate1: "",
      pageData: {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      },
    };
  },
  computed: {
    styles() {
      let width = this.width || 100;
      return {
        width: width <= 100 ? `${width}%` : `${width}px`,
      };
    },
  },
  created() {
    this.$nextTick(() => {
      // 时间选择弹窗默认选中明年
      let date = new Date().getFullYear() + 1;
      this.$refs['datePicker'].focusedDate=new Date(Date.parse(date));
    })
  },
  watch: {
    $route(val) {
      this.tabsName = this.$route.query.tabsName;
    }
  },
  methods: {
    goRouter() {
      this.$router.push({
        name: "returnOrder",
        query: {
          tabsName: this.tabsName
        }
      })
    },
    //缴费时间
    handleDaterangeInput(data) {
      this.pageData.payStartDate = data[0];
      this.pageData.payEndDate = data[1];
      if (this.pageData.payStartDate == "" && this.pageData.payEndDate == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    // 缴费年份
    handleDaterangeInput1(data) {
      this.pageData.orderYear = data;
      if (this.pageData.orderYear == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    onSearch() {
      this.pageData.page.current = 1;
      this.pageData.total = 0;
      this.$emit("onSearch", this.pageData);
    },
    onReset() {
      this.pageData = {
        total: 0,
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      }
      this.pickDate = [];
      this.pickDate1 = "";
      this.$emit("onSearch", this.pageData);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
